<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert center title="添加商品信息" type="info" show-icon></el-alert>
      <!-- 步骤条 -->
      <!-- 这里的activeStep接受数字  而下面的tabs的activeStep接受字符串 所以这里做一个算术运算 转换为数值型 -->
      <el-steps :align-center="true" :space="200" :active="activeStep-0" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <!-- 竖线Tabs栏 -->
      <!-- activeStep与name值相等指定当前的tab页 接受一个字符串 -->
      <!-- label-position="top"设置表单中的label与input的排列方式为上下 -->
      <el-form
        label-position="top"
        ref="addGoodsFormRef"
        :model="addGoodsForm"
        :rules="addGoodsFormRules"
        label-width="80px"
      >
        <!-- before-leave是切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。动态绑定也可以绑定函数 -->
        <!-- tab-click切换标签时触发的 -->
        <el-tabs
          @tab-click="tabsHandleClick"
          :before-leave="tabBeforeLeave"
          v-model="activeStep"
          tab-position="left"
        >
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="addGoodsForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input type="number" v-model="addGoodsForm.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input type="number" v-model="addGoodsForm.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input type="number" v-model="addGoodsForm.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
              <el-cascader
                v-model="cascaderOpt"
                :options="cascaderList"
                :props="cascaderProps"
                @change="addGoodsCascaderChange"
              ></el-cascader>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="商品参数" name="1">
            <!-- 先循环展示分类商品的属性名 再在复选框中生成每个属性下面的参数 -->
            <el-form-item v-for="(item,i) in manyData" :key="item.attr_id" :label="item.attr_name">
              <el-checkbox-group v-model="item.attr_vals" size="small">
                <el-checkbox v-for="(item2,i) in item.attr_vals" :key="i" :label="item2" border></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="商品属性" name="2">
            <el-form-item v-for="(item,i) in onlyData" :key="item.attr_id" :label="item.attr_name">
              <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="商品图片" name="3">
            <!-- 我们网站中所有的请求除了登录 都被拦截器添加了一个token 验证是否是登录状态
                 但是图片上传这里的action里的请求底层是用原生ajax写的 需手动添加token -->
                 <!-- 钩子函数一般不是@绑定的触发时间 而是属性绑定的方式 自动出发的 -->
                 <!-- on-success	文件上传成功时的钩子	function(response, file, fileList) -->
            <el-upload
              class="upload-demo"
              :headers="headersObj"
              action="http://192.168.14.65:8888/api/private/v1/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">商品内容</el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当下的步骤
      activeStep: "0",
      // 要添加的商品的相关数据
      addGoodsForm: {
        goods_name: "text",
        goods_price: 11,
        goods_weight: 11,
        goods_number: 11,
        pics: []
      },
      // 添加商品的校验规则
      addGoodsFormRules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" }
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" }
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" }
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" }
        ]
      },
      // 存储级联选择器里的数据
      cascaderList: [],
      // 选择器中当前选择的数据
      cascaderOpt: [1,3,6],
      // 级联选择器的配置项
      // label用来设置选择器显示哪一个字段的值 value设置当前选中存储到cascaderOpt的是哪一个字段的值
      cascaderProps: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id"
      },

      // 根据第一步选择的三级分类 获取的动态参数
      manyData: [],
      onlyData: [],
      // 在请求头中添加token 
      headersObj: {
        authorization: sessionStorage.getItem('token')
      },
    };
  },

  methods: {
    // 获取所有的分类信息 以供渲染到级联选择器中
    async getCascaderList() {
      var res = await this.axios.get("categories");
      console.log(res);
      if (res.meta.status == 200) {
        this.cascaderList = res.data;
      }
      // console.log(this.cascaderList);
    },

    // 商品分类选择器改变 判断选择的是否是三级分类
    addGoodsCascaderChange() {
      if (this.cascaderOpt.length != 3) {
        return (this.cascaderOpt = []);
      }
      console.log(this.cascaderOpt);
    },

    // 切换tabs时校验是否已正确选择分类
    tabBeforeLeave(n, o) {
      // n为新的tab的索引 o为旧的tab的索引
      // 如果是从第一个tab离开并且 没有选择正确的分类 就烦恼会false阻止切换tab栏
      if (o == 0 && this.cascaderOpt.length == 0) {
        this.$message.error("请选择三级分类");
        return false;
      }
    },

    // tab切换
    async tabsHandleClick() {
      if (this.activeStep == "1") {
        var res = await this.axios.get(
          `categories/${this.cascaderOpt[2]}/attributes`,
          {
            params: {
              sel: "many"
            }
          }
        );
        // 循环判断 如果每个分类属性item里面的参数值attr_vals 不为空 则转换为数组 否则直接赋值为空数组 以供复选框渲染使用
        // 复选框的v-model需要数组形式的数据 获取到的的attr_vals位字符串
        res.data.forEach(item => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(",") : [];
        });
        if (res.meta.status == 200) {
          this.manyData = res.data;
          console.log(this.manyData);
        }
      } else if (this.activeStep == "2") {
        var res = await this.axios.get(
          `categories/${this.cascaderOpt[2]}/attributes`,
          {
            params: {
              sel: "only"
            }
          }
        );
        // 循环判断 如果每个分类属性item里面的参数值attr_vals 不为空 则转换为数组 否则直接赋值为空数组 以供复选框渲染使用
        // 复选框的v-model需要数组形式的数据 获取到的的attr_vals位字符串
        // res.data.forEach(item => {
        //   item.attr_vals = item.attr_vals ? item.attr_vals.split(",") : [];
        // });
        if (res.meta.status == 200) {
          this.onlyData = res.data;
          console.log(this.onlyData);
        }
      }
    },
    // 图片上传成功触发的钩子函数 res为上传成功之后服务器的响应对象
    handleSuccess(res){
      console.log(res);
      if (res.meta.status == 200) {
        // 上传成功就把图片在服务器保存的路径 存储到addGoodsForm中 用以最后新增商品的参数传递
        this.addGoodsForm.pics.push({
          pic: res.data.tmp_path
        })
      }
      // 查看是否添加成功
      console.log(this.addGoodsForm);
    },

    handlePreview(){},
    // 删除页面上的某一种图片触发的钩子函数 参数时file 可以打印看看是什么
    handleRemove(file){
      console.log(file);
      // 得到删除图片保存的路径
      var filePath = file.response.data.tmp_path
      // 要删除addGoodsForm里面对应的那张图片才能 保证添加商品时不会添加上图片
      // 所以找找到addGoodsForm.pics里面对应的
      var index = this.addGoodsForm.pics.findIndex(item=>{
          return item.pic == filePath
      })
      // 找到相同的索引号删除该项
      this.addGoodsForm.pics.splice(index,1)
      console.log(this.addGoodsForm.pics);
    },
  },

  created() {
    this.getCascaderList();
  }
};
</script>

<style lang='less' scoped>
.el-steps {
  margin: 20px 0;
}
</style>
